<template>
    <div class="modal" :class="{ 'is-active': showConfirm }">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title">确认</p>
            </header>
            <section class="modal-card-body">
                <p>确定要离开吗？</p>
            </section>
            <footer class="modal-card-foot push-right shrink">
                <button class="button" @click.stop="confirmQuit">确定</button>
                <button class="button" @click.stop="cancelQuit">取消</button>
            </footer>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.push-right {
    justify-content: flex-end;
}

.shrink {
    padding: 10px;
}
</style>


<script>
import { mapState, mapActions } from 'vuex';

export default {
    data() {
        return {};
    },
    computed: {
        ...mapState({
            showConfirm: state => state.App.showQuitConfirm
        })
    },
    methods: {
        ...mapActions(['confirmQuit', 'cancelQuit'])
    }
}
</script>
